
<template>
  <div>
    <VRow style="background-color:#fff">
      <VCol cols="3">
        <aside class="flex h-[78vh]">
          <!-- First Column -->
          <div
            class="flex w-12 flex-col items-center space-y-8 border-r border-slate-300 bg-slate-50 py-8 dark:border-slate-700 dark:bg-slate-900 sm:w-16"
          >
            <!-- Logo -->
            <a href="#" class="mb-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-7 w-7 text-blue-600"
                fill="currentColor"
                stroke-width="1"
                viewBox="0 0 24 24"
              >
                <path
                  d="M20.553 3.105l-6 3C11.225 7.77 9.274 9.953 8.755 12.6c-.738 3.751 1.992 7.958 2.861 8.321A.985.985 0 0012 21c6.682 0 11-3.532 11-9 0-6.691-.9-8.318-1.293-8.707a1 1 0 00-1.154-.188zm-7.6 15.86a8.594 8.594 0 015.44-8.046 1 1 0 10-.788-1.838 10.363 10.363 0 00-6.393 7.667 6.59 6.59 0 01-.494-3.777c.4-2 1.989-3.706 4.728-5.076l5.03-2.515A29.2 29.2 0 0121 12c0 4.063-3.06 6.67-8.046 6.965zM3.523 5.38A29.2 29.2 0 003 12a6.386 6.386 0 004.366 6.212 1 1 0 11-.732 1.861A8.377 8.377 0 011 12c0-6.691.9-8.318 1.293-8.707a1 1 0 011.154-.188l6 3A1 1 0 018.553 7.9z"
                ></path>
              </svg>
            </a>
            <!-- New conversation -->
            <a
              href="#"
              class="rounded-lg p-1.5 text-slate-500 transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:text-slate-400 dark:hover:bg-slate-800"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M8 9h8"></path>
                <path d="M8 13h6"></path>
                <path
                  d="M12.01 18.594l-4.01 2.406v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v5.5"
                ></path>
                <path d="M16 19h6"></path>
                <path d="M19 16v6"></path>
              </svg>
            </a>
            <!-- Conversations -->
            <a
              href="#"
              class="rounded-lg bg-blue-100 p-1.5 text-blue-600 transition-colors duration-200 dark:bg-slate-800 dark:text-blue-600"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"
                ></path>
                <path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
              </svg>
            </a>
            <!-- Discover -->
            <a
              href="#"
              class="rounded-lg p-1.5 text-slate-500 transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:text-slate-400 dark:hover:bg-slate-800"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                <path d="M21 21l-6 -6"></path>
              </svg>
            </a>
            <!-- User -->
            <a
              href="#"
              class="rounded-lg p-1.5 text-slate-500 transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:text-slate-400 dark:hover:bg-slate-800"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                <path
                  d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
                ></path>
              </svg>
            </a>
            <!-- Settings -->
            <a
              href="#"
              class="rounded-lg p-1.5 text-slate-500 transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:text-slate-400 dark:hover:bg-slate-800"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M19.875 6.27a2.225 2.225 0 0 1 1.125 1.948v7.284c0 .809 -.443 1.555 -1.158 1.948l-6.75 4.27a2.269 2.269 0 0 1 -2.184 0l-6.75 -4.27a2.225 2.225 0 0 1 -1.158 -1.948v-7.285c0 -.809 .443 -1.554 1.158 -1.947l6.75 -3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98h-.033z"
                ></path>
                <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
              </svg>
            </a>
          </div>
          <!-- Second Column -->
          <div
            class="w-52 overflow-y-auto bg-slate-50 py-8 dark:bg-slate-900 sm:w-60"
          >
            <div class="flex items-start">
              <h2
                class="inline px-5 text-lg font-medium text-slate-800 dark:text-slate-200"
              >
                Chats
              </h2>
              <span class="rounded-full bg-blue-600 px-2 py-1 text-xs text-slate-200">
                24
              </span>
            </div>

            <div class="mx-2 mt-8 space-y-4">
              <form>
                <label for="chat-input" class="sr-only">Search chats</label>
                <div class="relative">
                  <input
                    id="search-chats"
                    type="text"
                    class="w-full rounded-lg border border-slate-300 bg-slate-50 p-3 pr-10 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
                    placeholder="Search chats"
                    rows="1"
                    required
                  />
                  <button
                    type="submit"
                    class="absolute bottom-2 right-2.5 rounded-lg p-2 text-sm text-slate-500 hover:text-blue-700 focus:outline-none sm:text-base"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5"
                      aria-hidden="true"
                      viewBox="0 0 24 24"
                      stroke-width="2"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M8 9h8"></path>
                      <path d="M8 13h5"></path>
                      <path
                        d="M11.008 19.195l-3.008 1.805v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5"
                      ></path>
                      <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                      <path d="M20.2 20.2l1.8 1.8"></path>
                    </svg>
                    <span class="sr-only">Search chats</span>
                  </button>
                </div>
              </form>

              <button
                class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
              >
                <h1
                  class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
                >
                  Tailwind Classes
                </h1>
                <p class="text-xs text-slate-500 dark:text-slate-400">12 Mar</p>
              </button>

              <button
                class="flex w-full flex-col gap-y-2 rounded-lg bg-slate-200 px-3 py-2 text-left transition-colors duration-200 focus:outline-none dark:bg-slate-800"
              >
                <h1
                  class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
                >
                  explain quantum computing
                </h1>
                <p class="text-xs text-slate-500 dark:text-slate-400">10 Feb</p>
              </button>
              <button
                class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
              >
                <h1
                  class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
                >
                  How to create ERP Diagram
                </h1>
                <p class="text-xs text-slate-500 dark:text-slate-400">22 Jan</p>
              </button>
              <button
                class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
              >
                <h1
                  class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
                >
                  API Scaling Strategies
                </h1>
                <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
              </button>
            </div>
          </div>
        </aside>
      </VCol>
      <VCol cols="9">
        <!-- Prompt Messages Container - Modify the height according to your need -->
        <div class="flex h-[78vh] w-full flex-col">
          <!-- Prompt Messages -->
          <div
            class="flex-1 overflow-y-auto rounded-xl p-4 text-sm leading-6 text-slate-900 dark:bg-slate-800 dark:text-slate-300 sm:text-base sm:leading-7"
          >
            <div v-for="record in records">
              <MessageUser v-if="record.type == 0" :record="record"></MessageUser>
              
            </div>
            
            
            <!-- <div class="mb-2 flex w-full flex-row justify-end gap-x-2 text-slate-500">
              <button class="hover:text-blue-600">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"
                  ></path>
                </svg>
              </button>
              <button class="hover:text-blue-600" type="button">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"
                  ></path>
                </svg>
              </button>
              <button class="hover:text-blue-600" type="button">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
                  ></path>
                  <path
                    d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
                  ></path>
                </svg>
              </button>
            </div> -->
          </div>
          <!-- Prompt message input -->
          <div class="mt-4 flex justify-center">
            <button
              class="inline-flex items-center gap-x-2 rounded-lg p-2 text-xs text-slate-600 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-blue-600 sm:text-sm"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="inline h-4 w-4"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"
                ></path>
                <path d="M20 4v5h-5"></path>
              </svg>
              Regenerate response
            </button>
          </div>
          <!-- Rounded input -->
          <form>
            <label for="chat-input" class="sr-only">Enter your prompt</label>
            <div class="relative">
              <button
                type="button"
                class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-600"
              >
                <svg
                  aria-hidden="true"
                  class="h-5 w-5"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z"
                  ></path>
                  <path d="M5 10a7 7 0 0 0 14 0"></path>
                  <path d="M8 21l8 0"></path>
                  <path d="M12 17l0 4"></path>
                </svg>
                <span class="sr-only">Use voice input</span>
              </button>
              <textarea
                v-model="message"
                id="chat-input"
                class="mt-2 block w-full resize-none border-none bg-slate-200 p-4 pl-10 pr-20 text-sm text-slate-900 shadow-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:text-slate-200 dark:placeholder-slate-400 dark:focus:ring-blue-600 sm:text-base"
                placeholder="Enter your prompt"
                rows="1"
                required
              ></textarea>
              <button
                type="button"
                @click="callStreamEndpoint"
                class="absolute bottom-2 right-2.5 rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 sm:text-base"
              >
                发送 <span class="sr-only">Send message</span>
              </button>
            </div>
          </form>
        </div>
      </VCol>
    </VRow>


    <!-- 显示从 Spring Boot 3 返回的结果 -->
    <span v-for="response in chatResponses" :key="response.id">
      {{ response.result.output.content }}
    </span>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MessageUser from './MessageUser.vue';

const message = ref('使用Java的stream对List集合排序');
const records = reactive([])
const chatResponses = ref([]);

const callStreamEndpoint = () => {
  const msg = message.value;
  records.push(...[{
    type: 0,
    msg: msg
  }])

  message.value = ''
};
</script>

